<template>
    <div class="back-top">
        <div class="top" ref="btn" @click="backTop">
            <img src="/static/images/base/back-top.png" alt=""><br>
            回<br>顶<br>部</div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      isTop: true,
      timer: null
    };
  },
  components: {},
  mounted() {
    this.needScroll();
  },
  methods: {
    needScroll() {
      let clientHeight = document.documentElement.clientHeight / 2;
      let obtn = this.$refs.btn;
      window.onscroll = function() {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(osTop,clientHeight)
        if (osTop >= clientHeight) {
          obtn.style.display = "block";
        } else {
          obtn.style.display = "none";
        }
        if (!this.isTop) {
          clearInterval(this.timer);
        }
        this.isTop = false;
      };
    },
    backTop() {
      let self = this;
      self.timer = setInterval(function() {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        self.isTop = true;
        if (osTop === 0) {
          clearInterval(self.timer);
        }
      }, 30);
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz {
  .back-top {
    .top:hover {
      background: #e93926;
    }
  }
}
.back-top {
  .top {
    padding: 25px 0;
    text-align: center;
    cursor: pointer;
    height: 103px;
    color: #fff;
    width: 50px;
    position: fixed;
    background: #d8d8d8;
    bottom: 100px;
    right: 0px;
    display: none;
  }
  .top:hover {
    background: #15c798;
  }
}
</style>


